<template>
    <div>
        <div id="container" style="height:600px;width:100%"></div>
    </div>
</template>
<script>
    import echarts from "echarts";
    import Sockjs from "sockjs-client"
    import Stomp from "stompjs";
    export default {
        data() {
            return {
                option: null,
                uskline:[],
                myChart:{},
                rawData:[],
            };
        },
        props:["id"],
        methods: {
            getsoket() {
                let me = this;
                var url2 = "xxxxxxxxxt";
                var socketer2 = new Sockjs(url2);
                me.sockClient2 = Stomp.over(socketer2);
                // 订阅地址
                var subscribe2 = "xxxxxxxxxx" + this.id;
                me.sockClient2.debug = false;
                // 连接
                me.sockClient2.connect(
                    {},
                    function(res) {
                        // 订阅
                        me.sockClient2.subscribe(subscribe2, function(sdata) {
                            me.uskline = JSON.parse(sdata.body);
                            me.kline();
                        });
                    },
                    function() {
                        me.sockClient2.disconnect();
                    }
                );
            },
            kline() {
                let me = this;
                me.rawData = me.uskline.one.lines;
                me.updateOption();
            },
            updateOption() {
                function calculateMA(dayCount, data) {
                    var result = [];
                    for (var i = 0, len = data.length; i < len; i++) {
                        if (i < dayCount) {
                            result.push("-");
                            continue;
                        }
                        var sum = 0;
                        for (var j = 0; j < dayCount; j++) {
                            sum += data[i - j][1];
                        }
                        result.push(sum / dayCount);
                    }
                    return result;
                }

                var dates = this.rawData.map(function(item) {
                    return item[0];
                });
                var ydates = this.rawData.map(function(item) {
                    return item[5];
                });
                var data = this.rawData.map(function(item) {
                    // 数据顺序开、关、小、大
                    return [+item[1], +item[4], +item[3], +item[2]];
                });
                var zhangdie = this.rawData.map(function(item) {
                    // 数据顺序开、关、小、大
                    return (item[4] - item[1]) / item[4];
                });
                var a = this.build_diff_data(12, 26, data);
                var b = this.build_dea_data(9, a);
                var macdData = this.build_macd_data(data, a, b);
                this.option = {
                    backgroundColor: "#313131",
                    tooltip: {
                        trigger: "item",
                        axisPointer: {
                            //鼠标悬浮刻度标线
                            animation: false,
                            type: "cross",
                            lineStyle: {
                                color: "#8392A5",
                                width: 1,
                                opacity: 1
                            }
                        }
                    },
                    axisPointer: {
                        link: { xAxisIndex: "all" },
                        label: {
                            backgroundColor: "#777"
                        }
                    },
                    grid: [
                        //图表区域位置
                        {
                            x: "8%",
                            y: "5%",
                            height: "55%"
                        },
                        {
                            x: "8%",
                            y: "65%",
                            height: "10%"
                        },
                        {
                            x: "8%",
                            y: "80%",
                            height: "10%"
                        }
                    ],
                    xAxis: [
                        {
                            gridIndex: 0,
                            type: "category",
                            data: dates,
                            axisLine: { lineStyle: { color: "#8392A5" } }
                        },
                        {
                            type: "category",
                            data: dates,
                            gridIndex: 1,
                            scale: true,
                            axisLine: { lineStyle: { color: "#8392A5" } },
                            position: "bottom"
                        },
                        {
                            type: "category",
                            data: dates,
                            gridIndex: 2,
                            scale: true,
                            axisLine: { lineStyle: { color: "#8392A5" } },
                            position: "bottom"
                        }
                    ],
                    yAxis: [
                        {
                            gridIndex: 0,
                            type: "value",
                            scale: true, //y轴数据自适应
                            axisLine: { lineStyle: { color: "#8392A5" } },
                            splitLine: { show: false }
                        },
                        {
                            gridIndex: 1,
                            type: "value",
                            scale: true, //y轴数据自适应
                            axisLine: { lineStyle: { color: "#8392A5" } },
                            splitLine: { show: false },
                            position: "left"
                        },
                        {
                            gridIndex: 2,
                            type: "value",
                            scale: true, //y轴数据自适应
                            axisLine: { lineStyle: { color: "#8392A5" } },
                            splitLine: { show: false },
                            position: "left"
                        }
                    ],

                    // 下面范围滚动条
                    dataZoom: [
                        {
                            type: "inside",
                            show: true,
                            realtime: true,
                            xAxisIndex: [0, 1, 2]
                        },
                        {
                            textStyle: {
                                color: "#8392A5"
                            },
                            handleIcon:
                                "M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z",
                            handleSize: "80%",
                            dataBackground: {
                                areaStyle: {
                                    color: "#8392A5"
                                },
                                lineStyle: {
                                    opacity: 0.8,
                                    color: "#8392A5"
                                }
                            },
                            handleStyle: {
                                color: "#fff",
                                shadowBlur: 3,
                                shadowColor: "rgba(0, 0, 0, 0.6)",
                                shadowOffsetX: 2,
                                shadowOffsetY: 2
                            }
                        }
                    ],
                    animation: false,
                    series: [
                        {
                            type: "candlestick",
                            name: "k线",
                            data: data,
                            itemStyle: {
                                normal: {
                                    color0: "#FD1050",
                                    color: "#0CF49B",
                                    borderColor0: "#FD1050",
                                    borderColor: "#0CF49B"
                                }
                            }
                        },
                        {
                            name: "小时k",
                            type: "line",
                            data: calculateMA(5, data),
                            smooth: true,
                            showSymbol: false,
                            lineStyle: {
                                normal: {
                                    width: 1
                                }
                            }
                        },
                        {
                            name: "MA10",
                            type: "line",
                            data: calculateMA(10, data),
                            smooth: true,
                            showSymbol: false,
                            lineStyle: {
                                normal: {
                                    width: 1
                                }
                            }
                        },
                        {
                            name: "MA20",
                            type: "line",
                            data: calculateMA(20, data),
                            smooth: true,
                            showSymbol: false,
                            lineStyle: {
                                normal: {
                                    width: 1
                                }
                            }
                        },
                        {
                            name: "MA30",
                            type: "line",
                            data: calculateMA(30, data),
                            smooth: true,
                            showSymbol: false,
                            lineStyle: {
                                normal: {
                                    width: 1
                                }
                            }
                        },
                        {
                            name: "Volumn",
                            type: "bar",
                            xAxisIndex: 1,
                            yAxisIndex: 1,
                            data: ydates
                        },
                        {
                            name: "MACD",
                            type: "bar",
                            xAxisIndex: 2,
                            yAxisIndex: 2,
                            data: macdData,
                            itemStyle: {
                                normal: {
                                    color: function(params) {
                                        var colorList;
                                        if (params.data >= 0) {
                                            colorList = "#14b143";
                                        } else {
                                            colorList = "#ef232a";
                                        }
                                        return colorList;
                                    }
                                }
                            }
                        },
                        {
                            name: "diff",
                            type: "line",
                            xAxisIndex: 2,
                            yAxisIndex: 2,
                            data: a,
                            lineStyle: {
                                normal: {
                                    width: 1
                                }
                            }
                        },
                        {
                            name: "dea",
                            type: "line",
                            xAxisIndex: 2,
                            yAxisIndex: 2,
                            data: b,
                            lineStyle: {
                                normal: {
                                    width: 1
                                }
                            }
                        }
                    ]
                };

                if (this.flag) {
                    this.myChart.setOption(this.option);
                } else {
                    this.option.dataZoom[0].start = 90;
                    this.option.dataZoom[0].end = 100;
                    this.myChart.setOption(this.option);
                    this.flag = true;
                }
                // echarts自适应宽度
                window.addEventListener("resize", () => {
                    this.myChart.resize();
            });
            },
            //   创建k线图
            getKcART() {
                var dom = document.getElementById("container");
                this.myChart = echarts.init(dom);
            },
            // 计算diff方法
            build_diff_data(m_short, m_long, data) {
                var result = [];
                var pre_emashort = 0;
                var pre_emalong = 0;
                for (var i = 0, len = data.length; i < len; i++) {
                    var ema_short = data[i][1];
                    var ema_long = data[i][1];
                    if (i != 0) {
                        ema_short =
                            (1.0 / m_short) * data[i][1] + (1 - 1.0 / m_short) * pre_emashort;
                        ema_long =
                            (1.0 / m_long) * data[i][1] + (1 - 1.0 / m_long) * pre_emalong;
                    }
                    pre_emashort = ema_short;
                    pre_emalong = ema_long;
                    var diff = ema_short - ema_long;
                    result.push(diff);
                }
                return result;
            },
            // 计算dea方法：
            build_dea_data(m, diff) {
                var result = [];
                var pre_ema_diff = 0;
                for (var i = 0, len = diff.length; i < len; i++) {
                    var ema_diff = diff[i];
                    if (i != 0) {
                        ema_diff = (1.0 / m) * diff[i] + (1 - 1.0 / m) * pre_ema_diff;
                    }
                    pre_ema_diff = ema_diff;
                    result.push(ema_diff);
                }
                return result;
            },
            // 计算macd方法：
            build_macd_data(data, diff, dea) {
                var result = [];
                for (var i = 0, len = data.length; i < len; i++) {
                    var macd = 2 * (diff[i] - dea[i]);
                    result.push(macd);
                }
                return result;
            }
        },
        created(){
            this.getsoket();
        },
        mounted(){
            this.getKcART();
        }
    };
</script>
<style scoped>
</style>